<script setup lang="js">
   import {onMounted,ref} from 'vue'
   import {getNewApi} from "@/apis/home.js";
   import HomePanel from "@/views/Home/components/HomePanel.vue";

   const newList =ref([])
    const getnewList=async ()=>{
      const res=  await getNewApi()
      console.log(res)
       newList.value = res.result
    }
    onMounted(()=>{
      getnewList()
    })
</script>

<template>
  <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质好物">
<!--    插槽的主体内容-->
   <ul class="good-list">
       <li v-for="item in newList" :key="item.id">
         <RouterLink to="/">
             <img :src="item.picture" alt=""/>
             <p class="name">{{item.name}}</p>
             <p class="price">&yen;{{item.price}}</p>
         </RouterLink>
       </li>
   </ul>
  </HomePanel>
</template>

<style scoped lang="scss">
    .good-list{
      display:flex;
      justify-content: space-between;
      height:406px;
      li{
        width:306px;
        height:406px;
        background:#f0f9f4;
        transition:all .5s;
        &:hover {   //悬停触发效果
          transform :translate3d(0,-3px,0);  //3d位移效果 水平垂直 z轴
        }
        img{
          width: 306px;
          height: 306px;
        }
        p{
          font-size:22px;
          padding-top:12px;
          text-align:center;
          text-overflow: ellipsis;  //文本溢出后 会用。。。。来表示
          white-space:nowrap; //强制文本不换行保留空格和换行符 文本超出容器会继续延伸
        }
        .price{
          color:$priceColor
        }

      }
    }
</style>
